import { ElMessage } from 'element-plus';
import { useCommentApi } from '/@/api/comment';
import { useApi } from '/@/hooks';
import { validateEMail } from '/@/utils/rules';

const { addCommentList, editCommentList, getCommentList } = useCommentApi();

export const rules = {
	productId: [{ required: true, message: '请选择评价商品', trigger: ['change'] }],
	email: [
		{ required: true, message: '请输入邮箱', trigger: ['blur'] },
		{ validator: validateEMail, trigger: ['blur'] },
	],
	content: [{ required: true, message: '请输入评价内容', trigger: ['blur'] }],
	star: [{ required: true, message: '请选择评价星级', trigger: ['change'] }],
	createTime: [{ required: true, message: '请选择评价时间', trigger: ['change'] }],
};

export const useInit = () => {
	const route = useRoute();
	const searchForm = ref({
		status: -1,
	});
	const page = ref({
		pageSize: 10,
		current: 1,
		total: 0,
	});
	const tableData = ref([]);
	const init = async () => {
		swapCommentLikeValue();
		console.log(searchForm.value);
		let res = await getCommentList({ ...searchForm.value, ...page.value });
		if (res.code !== 200) return;
		const { total, data } = res.data;
		tableData.value = data;
		page.value.total = total;
	};

	const updateComment = async (ruleForm) => {
		let params = {
			...ruleForm,
		};
		params.pics = JSON.stringify(ruleForm.picsArr);
		let res = await editCommentList(params);
		console.log(res);
	};

	onMounted(() => {
		// searchForm.value.productId = Number(route.query.id) || undefined;
	});
	function swapCommentLikeValue() {
		const { commentLikeStart, commentLikeEnd } = searchForm.value;
		if (!commentLikeStart || !commentLikeEnd || commentLikeStart < commentLikeEnd) return;
		searchForm.value.commentLikeStart = commentLikeEnd;
		searchForm.value.commentLikeEnd = commentLikeStart;
	}

	return {
		page,
		searchForm,
		tableData,
		init,
		updateComment,
		async changeStatus(row) {
			let { id, status } = row;
			const _status = status === 1 ? 0 : 1;
			let res = await editCommentList({ id, status: _status });
			if (res.code !== 200) return;
			ElMessage.success('更改状态成功！');
			init();
		},
	};
};
export const useAdd = (init) => {
	const isAdd = ref(false);
	const addDialogVisible = ref(false);
	const formRef = ref();
	const ruleForm = ref({ star: 5, status: 0 });

	return {
		rules,
		ruleForm,
		isAdd,
		addDialogVisible,
		formRef,
		title: computed(() => (isAdd.value ? '新增评价' : '查看评价')),
		toAdd() {
			isAdd.value = true;
			addDialogVisible.value = true;
			ruleForm.value = { star: 5, status: 0 };
			console.log(ruleForm.value);
			nextTick(() => {
				if (formRef.value) formRef.value.clearValidate();
			});
		},
		toDetail(row) {
			addDialogVisible.value = true;
			isAdd.value = false;
			console.log('-=-====', row);
			ruleForm.value = {
				...row,
				picsArr: JSON.parse(row.pics),
			};
			nextTick(() => {
				if (formRef.value) formRef.value.clearValidate();
			});
		},
		submit() {
			formRef.value.validate(async (valid) => {
				ruleForm.value = typeTransition();
				if (valid) {
					let res = await addCommentList(ruleForm.value);
					if (res.code !== 200) return;
					ElMessage.success('保存成功！');
					init();
					addDialogVisible.value = false;
					ruleForm.value = { star: 5 };
				}
				function typeTransition() {
					return {
						...ruleForm.value,
						pics: JSON.stringify(ruleForm.value.picsArr),
					};
				}
			});
		},
	};
};

export const useEdit = () => {
	const updateComment = async () => {
		let res = await editCommentList({ ...searchForm.value });
		console.log(res);
	};

	return {
		updateComment,
	};
};
